<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>关于作者</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<body>
<div id="wrapper" v-cloak>
    <div style="padding-bottom: 10px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item @click.native="parent.changeIndex('index')">首页</el-breadcrumb-item>
                <el-breadcrumb-item>关于作者</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div style="height: 1px; margin: 10px 0; background-color: white"></div>

    <el-form :model="entity">
        <el-form-item label="编辑内容" label-width="100px">
            <textarea id="mytextarea" cols="30" rows="30"></textarea>
        </el-form-item>

    </el-form>
    <div style="padding: 10px">
        <el-button type="primary" @click="save">保 存</el-button>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>


<script>

    let urlBase = "/api/author/";
    new Vue({
        el: "#wrapper",
        data: {
            options: [],
            fileList: [],
            user: {},
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
        },
        mounted() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};

            tinymce.init({
                selector: '#mytextarea',
                language: 'zh_CN',
                plugins: ['quickbars', 'link', 'table', 'image'], //选择需加载的插件
            });

            $.get("/api/author").then(res => {
                let result = res.data;
                if (result.length === 0) {
                    this.entity = {}
                } else {
                    this.entity = res.data[0];
                    setTimeout(() => {
                        tinymce.activeEditor.setContent(res.data[0].content);
                    }, 500)
                }
            })
        },
        methods: {
            fileSuccessUpload(res) {
                this.entity.file = "http://localhost:8888/files/" + res.data;
                this.entity.img = "http://localhost:8888/files/" + res.data;
                console.log(res)
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            save() {
                this.entity.content = tinymce.activeEditor.getContent();
                let type = this.entity.id ? "PUT" : "POST";
                console.log(this.entity);
                $.ajax({
                    url: urlBase,
                    type: type,
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    // location.href="author.html"
                })
            },
        }
    })
</script>
</body>
</html>
